import { watch, onUnmounted } from 'vue'
import useBoolean from './useBoolean'
import useBodyScroll from './useBodyScroll'

/**
 * 使用弹窗
 * @param hideScroll - 关闭html滚动条
 */
export default function useModalVisible(hideScroll = true) {
  const {
    bool: visible,
    setTrue: openModal,
    setFalse: closeModal,
    toggle: toggleModal,
  } = useBoolean()
  const { scrollBodyHandler } = useBodyScroll()

  function modalVisibleWatcher() {
    const stopHandle = watch(visible, async (newValue) => {
      scrollBodyHandler(newValue)
    })

    onUnmounted(() => {
      stopHandle()
    })
  }

  if (hideScroll) {
    modalVisibleWatcher()
  }

  return {
    visible,
    openModal,
    closeModal,
    toggleModal,
  }
}
